<template>
  <div class="card-title-wrapper">
    <span class="title-text">{{ cardTitle }}（{{ count }}）</span>
    <el-button @click="handleLoad" icon="Refresh" circle link></el-button>
  </div>
  <div
    :class="[
      'wrapper',
      'card-wrapper-normal',
      darkMode ? 'card-wrapper-dark' : 'card-wrapper-light',
    ]"
  >
    <el-table
      :data="tableData"
      height="246"
      style="width: 100%"
      size="default"
      @row-click="showDetail"
      :cell-style="{
        padding: '6px 0',
        margin: '0',
        cursor: 'pointer',
        backgroundColor: 'transparent',
      }"
      :header-cell-style="{
        padding: '8px 0',
        margin: '0',
        backgroundColor: 'transparent',
      }"
      :row-style="{ backgroundColor: 'transparent' }"
      :header-row-style="{ backgroundColor: 'transparent' }"
    >
      <!-- <el-table-column prop="number" label="#" width="45" align="center" /> -->
      <el-table-column label="#" width="50" align="center">
        <template #default="scope">
          <!-- <el-tag v-if="scope.row.status == 0" type="info">未开飞</el-tag> -->
          <!-- <el-tag v-if="scope.row.status == 1" type="success">已开飞</el-tag> -->
          <el-icon
            color="#909399"
            class="cell-icon"
            v-if="scope.row.status == 0"
          >
            <VideoPause />
          </el-icon>
          <el-icon
            color="#67C23A"
            class="cell-icon"
            v-if="scope.row.status == 1"
          >
            <VideoPlay />
          </el-icon>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="任务名称" min-width="60" /> -->
      <el-table-column label="任务名 / 应答机" min-width="120">
        <template #default="scope">
          <div class="vertical-align-center">
            <span class="task-name" v-if="scope.row.callsign == ''">{{
              scope.row.name
            }}</span>
            <span class="task-name" v-if="scope.row.callsign != ''">{{
              scope.row.callsign
            }}</span>
            <el-tag
              size="small"
              style="padding: 0 3px; margin-left: 6px"
              v-if="scope.row.sqawk != ''"
              >{{ scope.row.sqawk }}</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="sqawk" label="应答机" min-width="60" align="center" /> -->
      <!-- <el-table-column prop="level" label="作业高度" min-width="150" /> -->
      <!-- <el-table-column prop="area" label="作业范围" min-width="150" /> -->

      <el-table-column label="作业范围 / 作业高度" min-width="180">
        <template #default="scope">
          <span>{{ scope.row.area }}</span>
          <span v-if="scope.row.area.length > 0 && scope.row.level.length > 0"
            >；</span
          >
          <span>{{ scope.row.level }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="ATD" label="ATD" width="90" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center" v-if="scope.row.ATD == ''">
            <el-icon style="margin-right: 6px">
              <InfoFilled />
            </el-icon>
            <span style="font-size:12px;">未开飞</span>
          </div>
          <div style="display: flex; align-items: center" v-else>
            <el-icon style="margin-right: 6px">
              <Clock />
            </el-icon>
            <span>{{ dateFormat('HH:MM', new Date(scope.row.ATD)) }}</span>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
  <LoadData ref="loadData" />
</template>

<script setup>
import { h, ref, computed, nextTick } from "vue";
import dateFormat from "@/utils/dateFormat.js";
import {
  ElMessage,
  ElMessageBox,
  ElDescriptions,
  ElDescriptionsItem,
} from "element-plus";

// import load data components
import LoadData from "../LoadData";

// import stores
import useCommonStore from "@/store/common";
import useAvtivityStore from "@/store/activity";

// define stores
const commonStore = useCommonStore();
const activityStore = useAvtivityStore();
const tableData = computed(() => activityStore.generalStatus);

// dark mode variable from common store
const darkMode = computed(() => {
  return commonStore.darkMode;
});

// card title
const cardTitle = ref("通航活动");
const count = computed(() => tableData.value.length);

// load data component
const loadData = ref(null);
const loadGeneralData = () => {
  loadData.value.loadGeneralData();
};
function handleLoad() {
  // console.log('loadData.value', loadData.value);
  // console.log('loadData', loadData);
  loadGeneralData();
}

// show details
function showDetail(item) {
  let msg = [];
  // msg.push(h(ElDescriptionsItem, { label: '序号' }, () => '#' + item.number));
  msg.push(
    h(ElDescriptionsItem, { label: "任务", minWidth: "80px" }, () => item.name)
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "呼号", minWidth: "80px" },
      () => item.callsign
    )
  );
  msg.push(
    h(ElDescriptionsItem, { label: "SSR", minWidth: "80px" }, () => item.sqawk)
  );
  msg.push(
    h(ElDescriptionsItem, { label: "区域", minWidth: "80px" }, () => item.area)
  );
  msg.push(
    h(ElDescriptionsItem, { label: "高度", minWidth: "80px" }, () => item.level)
  );
  msg.push(
    h(ElDescriptionsItem, { label: "ATD", minWidth: "80px" }, () => item.ATD)
  );
  msg.push(
    h(ElDescriptionsItem, { label: "状态", minWidth: "80px" }, () =>
      item.status == 0 ? "未开飞" : "已开飞"
    )
  );
  ElMessageBox({
    title: item.callsign + " 详情",
    message: h(
      ElDescriptions,
      { column: 1, border: true, size: "" },
      () => msg
    ),
    draggable: true,
  });
}
</script>

<style scoped>
.wrapper {
  display: inline-block;
  padding: 6px;
  height: 260px;
  /* width: calc(50% - 24px); */
  width: 100%;
  margin-bottom: 24px;
}

.task-name {
  font-size: 18px;
  font-weight: bold;
  /* font-family: "YaHei Consolas Hybrid" */
}
</style>
